import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { useDiaryStore } from '../../store/diaryStore';

const WritingStreakChart: React.FC = () => {
  const getWritingStreakData = useDiaryStore((state) => state.getWritingStreakData);
  const data = getWritingStreakData();

  if (data.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-warm-gray-200 p-6">
        <h3 className="text-lg font-semibold text-warm-gray-800 mb-4">
          Writing Streak (Last 30 Days)
        </h3>
        <div className="flex items-center justify-center h-64 text-warm-gray-500">
          <p>No streak data available</p>
        </div>
      </div>
    );
  }

  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      const hasEntry = payload[0].payload.hasEntry;
      const streak = payload[0].payload.streak;
      return (
        <div className="bg-white p-3 border border-warm-gray-200 rounded-lg shadow-lg">
          <p className="font-medium text-warm-gray-800">{label}</p>
          <p className="text-sm text-warm-gray-600">
            {hasEntry ? `✓ Entry written` : '✗ No entry'}
          </p>
          {streak > 0 && (
            <p className="text-sm text-forest-green-600 font-medium">
              Streak: {streak} days
            </p>
          )}
        </div>
      );
    }
    return null;
  };

  const currentStreak = data[data.length - 1]?.streak || 0;
  const maxStreak = Math.max(...data.map(d => d.streak));
  const totalDaysWithEntries = data.filter(d => d.hasEntry).length;

  return (
    <div className="bg-white rounded-lg shadow-sm border border-warm-gray-200 p-6">
      <div className="flex justify-between items-start mb-4">
        <h3 className="text-lg font-semibold text-warm-gray-800">
          Writing Streak (Last 30 Days)
        </h3>
        <div className="text-right text-sm">
          <div className="text-forest-green-600 font-semibold">
            Current: {currentStreak} days
          </div>
          <div className="text-warm-gray-600">
            Best: {maxStreak} days
          </div>
        </div>
      </div>
      
      <ResponsiveContainer width="100%" height={250}>
        <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="streakGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#059669" stopOpacity={0.8}/>
              <stop offset="95%" stopColor="#059669" stopOpacity={0.1}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
          <XAxis 
            dataKey="date" 
            stroke="#6b7280"
            fontSize={11}
            tickLine={false}
            interval="preserveStartEnd"
          />
          <YAxis 
            stroke="#6b7280"
            fontSize={12}
            tickLine={false}
            axisLine={false}
          />
          <Tooltip content={<CustomTooltip />} />
          <Area
            type="monotone"
            dataKey="streak"
            stroke="#059669"
            strokeWidth={2}
            fillOpacity={1}
            fill="url(#streakGradient)"
          />
        </AreaChart>
      </ResponsiveContainer>
      
      <div className="mt-4 flex justify-between text-sm text-warm-gray-600">
        <span>{totalDaysWithEntries}/30 days with entries</span>
        <span>{Math.round((totalDaysWithEntries / 30) * 100)}% consistency</span>
      </div>
    </div>
  );
};

export default WritingStreakChart;